<template>
  <div>
    <el-form ref="form" :model="form" style="margin-left: 200px" label-width="120px">
      <el-form-item label="标识ID" style="width: 380px">
        <el-input v-model="form.markId" disabled></el-input>
      </el-form-item>
      <el-form-item label="模版名称" style="width: 380px">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="模块数量" style="width: 380px">
        <el-input v-model="form.contentNum" @change="numberChange"></el-input>
      </el-form-item>
      <el-form-item label="客户端类型">
        <el-select v-model="form.client" placeholder="请选择" style="width: 260px">
          <el-option label="PC" value="1"></el-option>
          <el-option label="惠配通" value="2"></el-option>
          <el-option label="惠付通" value="3"></el-option>
          <el-option label="通用" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模版图片" required>
        <el-upload
          class="avatar-uploader"
          :action="imgAddress"
          name="imageFile"
          :show-file-list="false"
          :on-success="success">
          <img v-if="this.imageUrl" :src="this.imgHost + '/' + this.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="模版说明" style="width: 500px">
        <el-input type="textarea" v-model="form.comments"></el-input>
      </el-form-item>
      <el-button @click="changeShow">添加模块</el-button>
      <el-collapse v-show="isShow" v-for="item in this.arr">
        <el-collapse-item title="模块信息" name="1">
          <el-form ref="form" :model="item" label-width="80px">
            <el-form-item label="模块序号" style="width: 500px">
              <el-input v-model="item.sortId" disabled></el-input>
            </el-form-item>
            <el-form-item label="模块描述" style="width: 500px">
              <el-input type="textarea" v-model="item.comment"></el-input>
            </el-form-item>
            <el-form-item label="模块类型">
              <el-select v-model="item.disPlayId" placeholder="请选择类型">
                <el-option label="没图" value="0"></el-option>
                <el-option label="有图" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show="item.disPlayId === '0'" label="商品数量" style="width: 200px">
              <el-input v-model="item.productNum"></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import { apiHost, apiURL } from '../../../config/settings.js'
  import { column } from '../../../config/proxy.js'
  import mixins from '../../../components/mixins.vue'
  import { mapState } from 'vuex'
  export default {
    mixins: [mixins],
    data () {
      return {
        imgHost: '',
        imgAddress: '',
        imageUrl: '',
        arr: [],
        isShow: false,
        form: {
          client: '',
          comments: '',
          contentNum: '',
          markId: '',
          name: ''
        }
      }
    },
    methods: {
      changeShow () {
        this.isShow = !this.isShow
      },
      numberChange (val) {
        this.arr = []
        for (var i = 1; i <= val; i++) {
          const data = {
            comment: '',
            disPlayId: '1',
            productNum: '',
            sortId: i
          }
          this.arr.push(data)
        }
      },
      success (res) {
        this.imageUrl = res.content.imageUrl
      },
      onSubmit () {
        if (this.imageUrl === '') {
          this.$message({
            showClose: true,
            message: '请先上传图片',
            type: 'error'
          })
          return false
        }
        var _data = this.form
        _data.image = this.imageUrl
        _data.createUser = this.userName
        _data.newTemplateContents = this.arr
        console.log(_data)
        column.template.edit(_data, res => {
          if (res.message === 'ok') {
            this.$message({
              showClose: true,
              message: '编辑成功',
              type: 'success'
            })
            this.$store.dispatch('delTab', {id: 'templatea_edit'})
            this.$store.dispatch('templateState', this.$store.state.updateState.templateState + 1)
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },
      cancel () {
        this.$store.dispatch('delTab', {id: 'templatea_edit'})
      }  // 取消
    },
    computed: mapState({
      userName: function (state) {
        return state.user.info.user_name
      }
    }),
    created () {
      this.imgHost = apiHost.imgHost
      this.imgAddress = 'http://' + apiHost.newCms + ':20000' + apiURL.upLoadImage
      const row = this.$store.state.tab.uid
      column.template.detail({id: row.id}, (res) => {
        // 赋值
        this.form.client = String(res.content.client)
        this.form.comments = res.content.comments
        this.form.contentNum = res.content.contentNum
        this.form.markId = res.content.markId
        this.form.name = res.content.name
        this.form.id = res.content.id
        res.content.newTemplateContents.forEach((item, index) => {
//          if (item.disPlayId !== null) {
          item.disPlayId = String(item.disPlayId)
//          } else {
//            item.disPlayId = '1'
//          }
        })
        this.arr = res.content.newTemplateContents
        this.imageUrl = res.content.image
      })
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    float: left;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>
